<template>
  <div class="favoriteBaby-view">
    <HomeTop></HomeTop>
    <HomeRight></HomeRight>
    <MyCenterPlugin></MyCenterPlugin>
    <ShoppingCartSearch></ShoppingCartSearch>
    <div class="favoriteBaby-logo">
            <img src="https://img.alicdn.com/imgextra/i2/O1CN01bw6IxW1J9dTQPa01x_!!6000000000986-2-tps-148-56.png"></img>
            <h2>我的淘宝</h2>
        </div>
      <div class="favoriteBaby-title1"><h2>我的收藏</h2></div>
      <div class="favoriteBaby-title2">批量管理</div>

       <div class="favoriteBaby-right-little-search-div">
         <input type="text" placeholder="搜索" class="favoriteBaby-right-little-search"></input>
        <span class="favoriteBaby-right-little-search-icon"><i class="iconfont icon-sousuo"  @click="favoriteBabyToSearch2()"></i></span>
    </div>
    <div class="favoriteBaby-big-select">
      <div class="favoriteBaby-big-select-one" v-for="item in fav_select_list" :key="item" @click="ChangeSelect(item,$event)">{{item}}</div>
    </div>
    <div class="favoriteBaby-under-select">
    <div class="favoriteBaby-allBaby" v-show="allBaby">
      <div class="favoriteBaby-allBaby-item1">有降价</div>
      <div class="favoriteBaby-allBaby-item1" @mouseenter="openitem(item)" @mouseleave="closeitem(item)" v-for="item in allBabyItem1List" :key="item">{{item}}<i class="iconfont icon-xiala"></i></div>
    <img class="favoriteBaby-img1" src="https://img.alicdn.com/imgextra/i4/O1CN01f8RBbB1IbkF4hGGlz_!!6000000000912-2-tps-280-280.png">
    </div>
    <div class="favoriteBaby-allBaby-item1-under" v-show="item1Show" @mouseenter="openitem1()" @mouseleave="closeitem1()">
      <div class="favoriteBaby-allBaby-item1-under-item" v-for="item in unilist" :key="item">{{item}}</div></div>

<div class="favoriteBaby-allBaby-item1-under" v-show="item2Show" @mouseenter="openitem2()" @mouseleave="closeitem2()">
      <div class="favoriteBaby-allBaby-item1-under-item" v-for="item in unilist2" :key="item">{{item}}</div></div>

      <div class="favoriteBaby-allBaby-item1-under" v-show="item3Show" @mouseenter="openitem3()" @mouseleave="closeitem3()">
      <div class="favoriteBaby-allBaby-item1-under-item" v-for="item in unilist3" :key="item">{{item}}</div>
      
      </div>

    <div class="favoriteBaby-babyList" v-show="babyList">
      <div class="favoriteBaby-babyList-item1" @click="openDialog()">新建清单</div>
     
      <el-dialog custom-class="favoriteBaby-babyList-item1-dialog" title="创建清单" :visible.sync="showDialog">
        
        <div slot="footer"><div class="favoriteBaby-babyList-item1-dialog-box1"><span class="favoriteBaby-babyList-item1-dialog-box-span">清单标题&nbsp;&nbsp;</span>
<el-input class="favoriteBaby-babyList-item1-dialog-box1-input1"
  type="text"
  v-model="text1"
  placeholder="请输入内容" 
  maxlength="18"
  show-word-limit
> 
</el-input></div>
<div class="favoriteBaby-babyList-item1-dialog-box2"><span class="favoriteBaby-babyList-item1-dialog-box-span">清单描述&nbsp;&nbsp;</span>
<el-input class="favoriteBaby-babyList-item1-dialog-box1-input2"
  type="text"
  v-model="text2"
  placeholder="请输入内容"
  maxlength="25"
  show-word-limit
>
</el-input></div>

 </div>

<div class="favoriteBaby-babyList-item1-dialog-box-qvxiao" @click="showDialog=false">取消</div>
<div class="favoriteBaby-babyList-item1-dialog-box-queding" @click="submitdialog1()">完成</div>

      </el-dialog>
      <img class="favoriteBaby-img" src="https://img.alicdn.com/imgextra/i4/O1CN01f8RBbB1IbkF4hGGlz_!!6000000000912-2-tps-280-280.png">
    </div>
    <div class="favoriteBaby-sameBaby" v-show="sameBaby"><img class="favoriteBaby-img" src="https://img.alicdn.com/imgextra/i4/O1CN01f8RBbB1IbkF4hGGlz_!!6000000000912-2-tps-280-280.png"></div>
    </div>

  </div>
</template>
<script>
import "../style/FavoriteBabyView.css";
export default {
  name: "FavoriteBabyView",
  mounted() {
   
    const selectElements1 = document.querySelectorAll(
      ".favoriteBaby-big-select-one"
    );
    selectElements1.forEach((el) => {
      if (el.textContent === "全部宝贝") {
        el.style.color = "#ff5000";
        el.style.borderBottom = "0.2rem solid #ff5000";
      }
    });
  },
  data() {
    return {
      item1Show: false,
      item2Show: false,
      item3Show: false,
      allBaby: true,
      babyList: false,
      sameBaby: false,
      showDialog: false,
      text1: "",
      text2: "",
      unilist: ["已买过", "低库存", "已失效"],
      unilist2: ["7天内", "30天内", "90天内", "半年前", "一年前"],
      unilist3: ["最近收藏在前", "最早收藏在前"],
      fav_select_list: ["全部宝贝", "宝贝清单", "同店宝贝"],
      allBabyItem1List: ["宝贝分类", "宝贝状态", "收藏时间", "宝贝排序"],
    };
  },
  methods: {
    favoriteBabyToSearch2() {
      const searchValue = document.querySelector(
        ".favoriteBaby-right-little-search"
      ).value;
      if (searchValue !== "") {
        this.$router.push({
          path: "/searchView",
          query: {
            value: searchValue,
          },
        });
      }
    },
    ChangeSelect(item, event) {
      const selectElements = document.querySelectorAll(
        ".favoriteBaby-big-select-one"
      );
      selectElements.forEach((el) => {
        el.style.color = "";
        el.style.borderBottom = "";
      });
      if (item === "全部宝贝") {
        this.allBaby = true;
        this.babyList = false;
        this.sameBaby = false;
        event.target.style.color = "#ff5000";
        event.target.style.borderBottom = "0.2rem solid #ff5000";
      } else if (item === "宝贝清单") {
        this.allBaby = false;
        this.babyList = true;
        this.sameBaby = false;
        event.target.style.color = "#ff5000";
        event.target.style.borderBottom = "0.2rem solid #ff5000";
      } else if (item === "同店宝贝") {
        this.allBaby = false;
        this.babyList = false;
        this.sameBaby = true;
        event.target.style.color = "#ff5000";
        event.target.style.borderBottom = "0.2rem solid #ff5000";
      }
    },
    openitem(item) {
      if (item === "宝贝状态") {
        this.item1Show = true;
      } else if (item === "收藏时间") {
        this.item2Show = true;
      } else if (item === "宝贝排序") {
        this.item3Show = true;
      }
    },
    closeitem(item) {
      if (item === "宝贝状态") {
        this.item1Show = false;
      } else if (item === "收藏时间") {
        this.item2Show = false;
      } else if (item === "宝贝排序") {
        this.item3Show = false;
      }
    },
    openitem1() {
      this.item1Show = true;
    },
    closeitem1() {
      this.item1Show = false;
    },
    openitem2() {
      this.item2Show = true;
    },
    closeitem2() {
      this.item2Show = false;
    },
    openitem3() {
      this.item3Show = true;
    },
    closeitem3() {
      this.item3Show = false;
    },
    openDialog() {
      this.showDialog = true;
      this.text1 = "";
      this.text2 = "";
    },
    submitdialog1() {
      if (this.text1 !== "" && this.text2 !== "") {
        this.showDialog = false;
        // 提交表单逻辑
      }
      
    },
  },
};
</script>